<template>
	<view class="address-edit">
		<uni-forms ref="baseForm" label-position="top">
			<uni-forms-item label="姓名">
				<uni-easyinput v-model="form.name" placeholder="请输入姓名" :input-border="false"/>
			</uni-forms-item>
			<uni-forms-item label="手机号">
				<uni-easyinput v-model="form.mobile" placeholder="请输入手机号" :input-border="false"/>
			</uni-forms-item>
			<uni-forms-item label="行政区域">
				<uni-data-picker v-model="form.area" :localdata="regions" popup-title="行政区域" :border="false"/>
			</uni-forms-item>
			<uni-forms-item label="详情地址">
				<uni-easyinput v-model="form.detailAddress" placeholder="请输入详情地址" :input-border="false"/>
			</uni-forms-item>
			<uni-froms-item>
				<radio style="transform:scale(0.8)" color='#00AB97' :checked="form.defaulted" @click="onRadioChange">是否默认</radio>
			</uni-froms-item>
		</uni-forms>
		<button class="btn" @click="onSave">保存</button>
	</view>
</template>

<script setup lang='ts'>
	import { reactive, ref, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import uniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
	import uniFormsItem from '@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue';
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue';
	import regions from './region-data.json';
	
	const { proxy } = getCurrentInstance() as any;
	
	const initData = ref(null);
	
	const form = reactive({
		name: '',
		mobile: '',
		area: [],
		detailAddress: '',
		defaulted: true
	});
	
	const onRadioChange = () => {
		form.defaulted = !form.defaulted;
	}
	
	const onSave = () => {
		const result = formVerification();
		if (result) {
			// 新增
			if(!initData.value?.id){
				const url = proxy.$API.getAddressList;
				return proxy.$UNIHTTP.postData(url, form).then(requestResultProcessing);
			}
			// 更新
			const url = proxy.$API.updateAddress;
			proxy.$UNIHTTP.putData(url, {id: initData.value.id, ...form}).then(requestResultProcessing);
		}
	}
	
	/**
	 * 表单校验
	 */
	const formVerification = () => {
		if(!form.name){
			return uni.showToast({icon: 'none', title: '请输入收件人姓名~'});
		}
		if(!form.mobile){
			return uni.showToast({icon: 'none', title: '请输入手机号~'});
		}else{
			var reg = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
			if (!reg.test(form.mobile)) {
				return uni.showToast({icon: 'none', title: '手机号码格式不正确！'});
			}
		}
		if(!form.detailAddress){
			return uni.showToast({icon: 'none', title: '请输入详细地址~'});
		}
		return true;
	}
	
	const requestResultProcessing = (res: {[propertyName: string]: any}) => {
		if (res.code == 0) {
			uni.showToast({icon: 'success', title: '保存成功'});
			setTimeout(() => uni.navigateBack(), 1000);
			return;
		} 	
		uni.showToast({icon: 'error', title: '保存失败'});
	}
	
	const initValue = (option: any) => {
		if(option.detail){
			initData.value = JSON.parse(decodeURIComponent(option.detail));
			form.name = initData.value.name;
			form.mobile = initData.value.mobile;
			form.detailAddress = initData.value.detailAddress;
			form.defaulted = initData.value.defaulted;
		}
	}
	
	onLoad((option) => {
		initValue(option);
	})
</script>

<style>
	.address-edit /deep/ .uni-forms-item:not(:last-child){
		margin-bottom: 15rpx !important;
		border-bottom: 1px solid #dcdcdc;
	}
	.address-edit /deep/ input{
		padding-left: 0 !important;
	}
</style>
<style scoped lang='scss'>
	.address-edit{
		padding: 20rpx;
		.btn{
			position: fixed;
			bottom: 20rpx;
			left: 20rpx;
			right: 20rpx;
			width: calc(100% - 40rpx);
			border: 0;
			background-color: #0ABA94;
			color: #fff;
			font-size: 30rpx;
			border-radius: 40rpx;
		}
	}
</style>
